<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>内置指令 v-pre</title>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

</head>

<body>
    <!-- 
        学过的内置指令
            一：v-bind  :   单向绑定解析表达式   可简写成：  ：xxx
            二：v-model :   双向数据绑定
            三：v-for   :   遍历数组/对象/字符串
            四：v-on    :   绑定事件监听，可简写成  @
            五：v-if    :   条件渲染(动态控制节点是否存在)
            六：v-else    :   条件渲染(动态控制节点是否存在)
            七：v-show    :   条件渲染(动态控制节点是否展示)

        v-pre 指令()：
            一:跳过其所在节点的编译过程
            二：可利用它跳过，没有使用指令语法，没有使用插值语法的节点，会加快编译。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2 v-pre>Vue其实很简单</h2><br/><br/>
       <h2>当前n的值是:{{n}}</h2><br/><br/>

       <button @click="n++">点我n+1</button>
    </div>

</body>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

    

    const vm = new Vue({
        el: '#root',
        data: {
            name: '徐亚远',
            msg: '你好，xyy',
            strHtml: '<h3>你好啊！ v-html </h3>',
            n:1,
        },
    })
</script>

</html>